<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				background: red;
				/* margin-bottom: 10px; */
			}
			.box2{
				background: green;
				/* margin-top: 10px; */
			}
			
			.box1 p{
				float: left;
				width: 100px;
				background: yellow;
				
			}
						
			.box2 p{
				width: 100px;
				background: blue;				
			}
			p{
				float: left;
			}
			.wall{
				clear: both;
				/* height: 30px; */
				
			}
			/* .h20{
				height: 20px;
			} */
			
		</style>
	</head>
	<body>
		<!-- 
		清除浮动的第四种方式
		2、内墙法：
		
		2-1在第一个盒子中所有子元素最后添加一个额外的块级元素		
		2-2给这个额外添加的块级元素设置clear: both;属性
		
		注意点:
		内墙法它可以让第二个盒子使用margin-top属性
		内墙法它可以让第一个盒子使用margin-bottom属性
		内墙法也可直接设置高度		
		
		外墙法和内墙法区别?		
		外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度		 
		 -->
		 <div class="box1">
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
			<!-- <div class="wall"></div> -->
		 </div>
		 <div class="wall"></div>
		 
		 <div class="box2">
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 </div>
		 
		 
	</body>
</html>
